<template>
    <view>
        <van-search v-model="keyword" shape="round" placeholder="请输入搜索关键词" @search="searchChange" />
        <van-notice-bar mode="closeable" text="验证后可查看产品价格 >" color="#FF6200" background="#FFECE0" v-if="show" />
        <view class="medicalList">
            <view class="medicalList-item" v-for="item in productList" :key="item.id" @click="naClick(item.id)">
                <image mode="aspectFill" :src="baseUrl + item.images" class="medicalList-item-img"></image>
                <view class="medicalList-item-title">{{ item.title }}</view>
                <view class="medicalList-item-price-text" v-if="!user.mobile">验证后查询底价</view>
                <view class="medicalList-item-price" v-else>
                    <view class="medicalList-item-price-point">会员价:</view>
                    <view class="medicalList-item-price-num">¥{{ item.price }}</view>
                    <view class="medicalList-item-price-nu">¥{{ item.price }}</view>
                </view>
                <view class="medicalList-item-company">{{ item.description }}</view>
            </view>
        </view>
    </view>

</template>

<script>
import { getGoodsList } from "@/api/api.js"
import baseUrl from "@/api/baseUrl";
import {
    mapState, mapMutations
} from 'vuex';
export default {
    data() {
        return {
            baseUrl,
            show: false,
            main_type: 2,
            keyword: '',
            page: 1,
            limit: 50,
            productList: []
        }
    },
    onLoad(options) {
        this.serve()
    },
    computed: {
        ...mapState(["user"])
    },

    methods: {
        searchChange(e) {
            this.keyword = e.detail
            this.serve()
        },
        serve() {
            let data = {
                main_type: this.main_type,
                keyword: this.keyword,
                page: this.page,
                limit: this.limit,
            }
            getGoodsList(data).then(res => {
                if (res.code == 1) {
                    this.productList = res.data.list
                }
            })

        },
        naClick(id) {
            uni.navigateTo({
                url: '/subCure/particulars/particulars?pay=true&id=' + id
            })
        }
    },
}
</script>

<style scoped lang="scss">
.medicalList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20upx 10upx;
    padding: 10upx 20upx 50upx 20upx;

    .medicalList-item {
        background-color: #fff;
        border-radius: 20upx;
        overflow: hidden;
        padding-bottom: 5upx;

        .medicalList-item-img {
            width: 350upx;
            height: 345upx;
            border-radius: 20upx 20upx 0 0;
        }

        .medicalList-item-title {
            color: #333333;
            font-size: 30upx;
            padding: 10upx 10upx;
            text-transform: capitalize;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .medicalList-item-price-text {
            font-size: 24upx;
            color: #FF6200;
            padding: 10upx 5upx;
        }

        .medicalList-item-price {
            display: flex;
            align-items: center;
            padding: 5upx 10upx;
        }

        .medicalList-item-price-point {
            font-size: 26upx;
            color: #FF6200;
            font-weight: normal;
        }

        .medicalList-item-price-num {
            font-size: 30upx;
            color: #FF6200;
            font-weight: bold;
            margin: 0 10upx;
        }

        .medicalList-item-price-nu {
            font-size: 26upx;
            color: #A2A2A2;
            font-weight: normal;
        }
    }

    .medicalList-item-company {
        font-size: 22upx;
        color: #A2A2A2;
        margin: 10upx;
    }
}
</style>